<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>活动详情</title>
  <style>
    .top-bar {
      background-color: #4285f4;
      color: white;
      padding: 15px;
      text-align: center;
    }
    .top-bar h1 {
      margin: 0;
      font-size: 20px;
    }
    .detail-section {
      margin: 15px;
    }
    .detail-section h3 {
      color: #4285f4;
      margin-bottom: 10px;
    }
    .detail-item {
      margin-bottom: 8px;
      font-size: 14px;
    }
    .btn {
      background-color: #4285f4;
      color: white;
      border: none;
      padding: 8px 15px;
      border-radius: 4px;
      cursor: pointer;
      margin: 5px;
    }
    .back-btn {
      margin: 15px;
    }
  </style>
</head>
<body>
<div class="top-bar">
  <h1>活动详情</h1>
</div>
<div class="detail-section">
  <h3>活动名称1</h3>
  <div class="detail-item">创建年度：2023年</div>
  <div class="detail-item">活动区域：湖北省武汉市洪山区</div>
  <div class="detail-item">活动牵头宣传组：宣传组名称1</div>
  <div class="detail-item">活动创建人：李明</div>
  <div class="detail-item">活动来源：自主创建</div>
  <div class="detail-item">计划开始时间：2023/03/29</div>
  <div class="detail-item">计划结束时间：2023/03/29</div>
  <div class="detail-item">计划时长：1天（24小时）</div>
</div>
<div class="detail-section">
  <h3>成员</h3>
  <div class="detail-item">姓名：张三</div>
  <div class="detail-item">单位/组织：XX大学</div>
  <div class="detail-item">职称：主任</div>
  <div class="detail-item">职位：教授</div>
  <div class="detail-item">范围：湖北省</div>
  <div class="detail-item">学生助手：无</div>
  <div class="detail-item">联系电话：15888888888</div>
</div>
<div class="detail-section">
  <h3>到访中学</h3>
  <div class="detail-item">中学名称：武汉第一中学</div>
  <div class="detail-item">到访日期：2023/03/29</div>
  <div class="detail-item">宣讲形式：线下宣讲</div>
</div>
<div class="detail-section">
  <h3>活动页</h3>
  <div class="detail-item">2023/3/29 00:00:00</div>
  <div class="detail-item">记录人：张三</div>
  <div class="detail-item">同校：</div>
  <div class="detail-item">展示激励的一条</div>
</div>
<div class="back-btn">
  <button class="btn" onclick="location.href='my-activity.html'">返回我的活动</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>活动详情</title>
  <!-- 引入Layui CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
  <style>
    body {
      background-color: #f5f7fa;
      padding: 20px;
    }
    .layui-card {
      max-width: 500px;
      margin: 0 auto;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .layui-card-header {
      background-color: #1E9FFF;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .layui-form-item .layui-form-label {
      width: 120px;
    }
    .layui-form-item .layui-input-block {
      margin-left: 150px;
    }
    .form-actions {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .form-actions .layui-btn {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
    }
    .activity-info {
      padding: 15px 20px;
      border-bottom: 1px solid #eee;
    }
    .activity-info p {
      margin-bottom: 10px;
      line-height: 1.6;
    }
    .activity-info .title {
      font-weight: bold;
      margin-bottom: 15px;
      font-size: 18px;
    }
    .required {
      color: #FF5722;
    }
    .share-btn {
      color: #1E9FFF;
      cursor: pointer;
      float: right;
    }
    .footer-note {
      text-align: center;
      margin-top: 15px;
      color: #666;
      font-size: 12px;
    }
  </style>
</head>
<body>
<div class="layui-card">
  <div class="layui-card-header">
    <span>活动详情</span>
    <div>
      <button class="layui-btn layui-btn-primary layui-btn-sm" style="margin-right: 5px;">
        <i class="layui-icon layui-icon-more-vertical"></i>
      </button>
      <button class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon layui-icon-refresh"></i>
      </button>
    </div>
  </div>

  <div class="layui-card-body">
    <!-- 活动信息 -->
    <div class="activity-info">
      <p>
        <span style="display: inline-block; width: 80px;">所属高中：</span>
        武汉第一中学
      </p >
      <p>
        <span style="display: inline-block; width: 80px;">行政区域：</span>
        湖北省武汉市江汉区
      </p >
      <p>
        <span style="display: inline-block; width: 80px;">活动时间：</span>
      </p >
      <p style="padding-left: 80px;">计划开始日期: 2023/03/29</p >
      <p style="padding-left: 80px;">计划结束日期: 2023/03/29</p >
      <p style="padding-left: 80px;">合计时长: 1天</p >
      <p>
        <span style="display: inline-block; width: 80px;">活动简介：</span>
        活动简介活动简介活动简介活动简介活动简介活动简介
      </p >
    </div>
    <!-- 报名申请表单 -->
    <form class="layui-form" lay-filter="registrationForm" id="registrationForm">
      <fieldset class="layui-elem-field">
        <legend>报名申请</legend>
        <div class="layui-field-box">
          <div class="layui-form-item">
            <label class="layui-form-label">姓名：<span class="required">*</span></label>
            <div class="layui-input-block">
              <input type="text" name="name" placeholder="请输入姓名"
                     lay-verify="required" autocomplete="off"
                     class="layui-input">
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">学号/工号：<span class="required">*</span></label>
            <div class="layui-input-block">
              <input type="text" name="studentId" placeholder="请输入学号/工号"
                     lay-verify="required" autocomplete="off"
                     class="layui-input">
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">学院：<span class="required">*</span></label>
            <div class="layui-input-block">
              <input type="text" name="college" placeholder="请输入学院"
                     lay-verify="required" autocomplete="off"
                     class="layui-input">
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">
              联系电话：<span class="required">*</span>
            </label>
            <div class="layui-input-block">
              <input type="tel" name="phone" placeholder="请输入联系电话"
                     lay-verify="required|phone" autocomplete="off"
                     class="layui-input">
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">QQ：</label>
            <div class="layui-input-block">
              <input type="text" name="qq" placeholder="请输入QQ号码"
                     autocomplete="off" class="layui-input">
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">微信：</label>
            <div class="layui-input-block">
              <input type="text" name="wechat" placeholder="请输入微信号"
                     autocomplete="off" class="layui-input">
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">
              请选择您的毕业中学：<span class="required">*</span>
            </label>
            <div class="layui-input-block">
              <input type="text" name="highSchool" placeholder="请选择您的毕业中学"
                     lay-verify="required" autocomplete="off"
                     class="layui-input">
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">
              是否愿意担任队伍负责人：<span class="required">*</span>
            </label>
            <div class="layui-input-block">
              <select name="isLeader" lay-verify="required">
                <option value="">请选择是否愿意担任队伍负责人</option>
                <option value="1">是</option>
                <option value="0">否</option>
              </select>
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">大学以来担任学生干部经历：</label>
            <div class="layui-input-block">
                                <textarea name="leadership" placeholder="请输入大学以来担任学生干部经历..."
                                          class="layui-textarea" rows="3"></textarea>
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">大学以来获奖荣誉经历：</label>
            <div class="layui-input-block">
                                <textarea name="awards" placeholder="请输入大学以来获奖荣誉经历..."
                                          class="layui-textarea" rows="3"></textarea>
            </div>
          </div>
        </div>
      </fieldset>

      <div class="form-actions">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-fluid" id="saveDraft">
          保存记录
        </button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid" id="submitForm">
          立即报名
        </button>
      </div>

      <p class="footer-note">
        报名审核通过后，可见更多本活动信息
      </p >
    </form>
  </div>
</div>

<!-- 引入Layui JS -->
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
<script>
  layui.use(['form', 'layer'], function() {
    var form = layui.form;
    var layer = layui.layer;
    var $ = layui.$; // 引入jQuery

    // 修复Layui表单验证方法，确保能正确验证指定表单
    function validateForm(formFilter) {
      var flag = true;
      // 遍历所有带验证规则的表单元素
      $('form[lay-filter="' + formFilter + '"] *[lay-verify]').each(function() {
        var verifyRules = $(this).attr('lay-verify').split('|');
        var val = $(this).val().trim();
        var name = $(this).attr('name') || $(this).prev('label').text().replace(/：|:/g, '');

        // 验证必填项
        if (verifyRules.includes('required') && val === '') {
          layer.tips(name + '不能为空', this, {tips: 2, time: 2000});
          flag = false;
          return false; // 终止循环，优先提示第一个未填项
        }

        // 验证手机号
        if (verifyRules.includes('phone') && val !== '') {
          var phoneReg = /^1[3-9]\d{9}$/;
          if (!phoneReg.test(val)) {
            layer.tips('请输入正确的手机号', this, {tips: 2, time: 2000});
            flag = false;
            return false;
          }
        }
      });
      return flag;
    }

    // 立即报名按钮点击事件：验证通过后跳转至success.html
    $('#submitForm').click(function() {
      // 验证表单（使用修复后的验证方法）
      var isFormValid = validateForm('registrationForm');
      if (isFormValid) {
        // 显示提交中提示，增强用户感知
        layer.msg('报名提交中...', {icon: 16, time: 1000, shade: 0.3});
        // 延迟1秒跳转（模拟真实提交耗时，避免跳转太快导致用户困惑）
        setTimeout(function() {
          window.location.href = 'successs.html'; // 跳转到成功页面
        }, 1000);
      }
    });s

    // 保存记录按钮点击事件：优化提示交互
    $('#saveDraft').click(function() {
      // 简单判断是否有已填写的内容（避免空表单保存）
      var hasContent = false;
      $('#registrationForm input, #registrationForm textarea, #registrationForm select').each(function() {
        if ($(this).val().trim() !== '') {
          hasContent = true;
          return false;
        }
      });

      if (hasContent) {
        layer.msg('记录已保存', {icon: 0, time: 1500});
        // 实际项目中可在此处添加：将表单数据存入localStorage或提交到后端保存草稿
        // 示例：localStorage.setItem('draftData', JSON.stringify(form.val('registrationForm')));
      } else {
        layer.msg('表单未填写内容，无需保存', {icon: 2, time: 1500});
      }
    });

    // 初始化下拉选择框（Layui必须初始化才能正常显示）
    form.render('select');
  });
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>添加中学</title>
  <style>
    .top-bar {
      background-color: #4285f4;
      color: white;
      padding: 15px;
      text-align: center;
    }
    .top-bar h1 {
      margin: 0;
      font-size: 20px;
    }
    .form-section {
      margin: 20px;
    }
    .form-item {
      margin-bottom: 15px;
    }
    .form-item label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    .form-item input {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    .btn {
      background-color: #4285f4;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 10px;
    }
    .back-btn {
      margin: 15px;
    }
  </style>
</head>
<body>
<div class="top-bar">
  <h1>添加中学</h1>
</div>
<div class="form-section">
  <div class="form-item">
    <label for="schoolName">中学名称*</label>
    <input type="text" id="schoolName" placeholder="请输入中学名称" />
  </div>
  <div class="form-item">
    <label for="visitDate">到访日期*</label>
    <input type="text" id="visitDate" placeholder="请输入到访日期" />
  </div>
  <div class="form-item">
    <label for="promotionForm">宣传形式*</label>
    <input type="text" id="promotionForm" placeholder="请输入宣传形式" />
  </div>
  <button class="btn">添加</button>
</div>
<div class="back-btn">
  <button class="btn" onclick="location.href='my-activity.html'">返回我的活动</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>添加照片</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
  <style>
    .photo-item {
      display: inline-block;
      margin: 10px;
      position: relative;
    }
    .photo-item img {
      width: 150px;
      height: 100px;
    }
    .photo-item .remove-photo {
      position: absolute;
      top: -10px;
      right: -10px;
      background-color: red;
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-md12">
      <h2 class="layui-title">添加照片</h2>
      <form class="layui-form" action="" lay-filter="addPhotoForm">
        <div class="layui-form-item">
          <button type="button" class="layui-btn" id="uploadPhoto">
            <i class="layui-icon"></i>上传文件
          </button>
          <div id="photoList"></div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addPhoto">添加</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js"></script>
<script>
  layui.use(['upload', 'form'], function(){
    var upload = layui.upload;
    var form = layui.form;
    // 执行实例
    var uploadInst = upload.render({
      elem: '#uploadPhoto' // 绑定元素
      ,url: 'your_upload_url' // 上传接口，需替换为实际后端接口
      ,accept: 'images'
      ,exts: 'jpg|png'
      ,size: 10240 // 10M
      ,multiple: true
      ,number: 5
      ,done: function(res){
        // 上传完毕回调
        var photoHtml = '<div class="photo-item">';
        photoHtml += '< img src="' + res.data.filePath + '" alt="photo">';
        photoHtml += '<div class="remove-photo" onclick="removePhoto(this)">×</div>';
        photoHtml += '</div>';
        document.getElementById('photoList').innerHTML += photoHtml;
      }
      ,error: function(){
        // 请求异常回调
        layer.msg('上传失败', {icon: 5});
      }
    });
    form.on('submit(addPhoto)', function(data){
      // 表单提交逻辑
      layer.msg('添加成功', {icon: 1});
      return false;
    });
  });
  function removePhoto(elem) {
    var parent = elem.parentNode;
    parent.parentNode.removeChild(parent);
  }
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>视频上传</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <style>
    .upload-area {
      border: 2px dashed #ccc;
      transition: all 0.3s ease;
    }
    .upload-area.dragover {
      border-color: #4285f4;
      background-color: #f0f7ff;
    }
    .progress-bar {
      height: 5px;
      background-color: #e0e0e0;
      overflow: hidden;
      border-radius: 3px;
      display: none;
    }
    .progress-bar-fill {
      height: 100%;
      background-color: #4285f4;
      width: 0%;
      transition: width 0.3s ease;
    }
  </style>
</head>
<body class="bg-gray-50">
<div class="max-w-3xl mx-auto bg-white shadow-md rounded-lg overflow-hidden">
  <!-- 顶部栏 -->
  <div class="bg-blue-500 text-white p-4 text-center">
    <h1 class="text-xl font-bold">添加视频</h1>
  </div>

  <!-- 上传区域 -->
  <div class="p-6">
    <form id="uploadForm" class="space-y-4">
      <!-- 上传区域 -->
      <div class="upload-area rounded-lg p-8 text-center cursor-pointer" id="uploadArea">
        <input type="file" id="fileInput" accept="video/mp4,video/avi,video/wmv" class="hidden" />
        <label for="fileInput" class="cursor-pointer block">
          <i class="fa fa-cloud-upload text-5xl text-blue-500 mb-3"></i>
          <p class="text-gray-700 font-medium">点击或拖拽文件到此处上传</p >
          <p class="text-gray-500 text-sm mt-1">支持 MP4、AVI、WMV 格式，最大 100MB</p >
        </label>
      </div>

      <!-- 已选文件显示 -->
      <div id="fileInfo" class="hidden">
        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
          <div class="flex items-center">
            <i class="fa fa-file-video-o text-blue-500 mr-3"></i>
            <div>
              <p id="fileName" class="font-medium text-gray-800 truncate max-w-md"></p >
              <p id="fileSize" class="text-sm text-gray-500"></p >
            </div>
          </div>
          <button type="button" id="removeFile" class="text-red-500 hover:text-red-700">
            <i class="fa fa-times"></i>
          </button>
        </div>
      </div>

      <!-- 进度条 -->
      <div class="progress-bar">
        <div class="progress-bar-fill" id="progressBar"></div>
      </div>

      <!-- 提交按钮 -->
      <button type="submit" id="submitBtn" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-lg font-medium transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
        提交视频
      </button>
    </form>

    <!-- 返回按钮 -->
    <div class="mt-6 text-center">
      <button class="btn" onclick="location.href='my-activity.html'">返回我的活动</button>
    </div>
  </div>
</div>

<script>
  // 获取DOM元素
  const fileInput = document.getElementById('fileInput');
  const uploadArea = document.getElementById('uploadArea');
  const fileInfo = document.getElementById('fileInfo');
  const fileName = document.getElementById('fileName');
  const fileSize = document.getElementById('fileSize');
  const removeFile = document.getElementById('removeFile');
  const submitBtn = document.getElementById('submitBtn');
  const progressBar = document.getElementById('progressBar');
  const uploadForm = document.getElementById('uploadForm');

  // 存储选中的文件
  let selectedFile = null;

  // 处理文件选择
  fileInput.addEventListener('change', handleFileSelect);

  // 上传区域点击触发文件选择
  uploadArea.addEventListener('click', () => {
    fileInput.click();
  });

  // 拖拽功能
  uploadArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    uploadArea.classList.add('dragover');
  });

  uploadArea.addEventListener('dragleave', () => {
    uploadArea.classList.remove('dragover');
  });

  uploadArea.addEventListener('drop', (e) => {
    e.preventDefault();
    uploadArea.classList.remove('dragover');

    if (e.dataTransfer.files.length) {
      fileInput.files = e.dataTransfer.files;
      handleFileSelect(e);
    }
  });

  // 移除文件
  removeFile.addEventListener('click', () => {
    fileInput.value = '';
    selectedFile = null;
    fileInfo.classList.add('hidden');
    submitBtn.disabled = true;
  });

  // 表单提交
  uploadForm.addEventListener('submit', (e) => {
    e.preventDefault();
    if (selectedFile) {
      uploadFile();
    }
  });

  // 处理文件选择
  function handleFileSelect(e) {
    const file = e.target.files[0];
    if (!file) return;

    // 验证文件类型
    const allowedTypes = ['video/mp4', 'video/avi', 'video/wmv'];
    if (!allowedTypes.includes(file.type)) {
      alert('请上传 MP4、AVI 或 WMV 格式的视频文件');
      fileInput.value = '';
      return;
    }

    // 验证文件大小（100MB）
    const maxSize = 100 * 1024 * 1024; // 100MB
    if (file.size > maxSize) {
      alert('文件大小不能超过 100MB');
      fileInput.value = '';
      return;
    }

    // 显示文件信息
    selectedFile = file;
    fileName.textContent = file.name;
    fileSize.textContent = formatFileSize(file.size);
    fileInfo.classList.remove('hidden');
    submitBtn.disabled = false;
  }

  // 格式化文件大小
  function formatFileSize(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  }

  // 模拟文件上传
  function uploadFile() {
    // 禁用按钮防止重复提交
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 上传中...';

    // 显示进度条
    progressBar.parentElement.style.display = 'block';
    progressBar.style.width = '0%';

    // 模拟上传进度
    let progress = 0;
    const interval = setInterval(() => {
      progress += Math.random() * 10;
      if (progress >= 100) {
        progress = 100;
        clearInterval(interval);

        // 上传完成后延迟显示结果
        setTimeout(() => {
          alert('文件上传成功！');
          // 重置表单
          resetForm();
          // 可以在这里添加跳转逻辑
          // location.href = 'success.html';
        }, 500);
      }
      progressBar.style.width = progress + '%';
    }, 300);
  }

  // 重置表单
  function resetForm() {
    fileInput.value = '';
    selectedFile = null;
    fileInfo.classList.add('hidden');
    progressBar.parentElement.style.display = 'none';
    progressBar.style.width = '0%';
    submitBtn.disabled = true;
    submitBtn.innerHTML = '提交视频';
  }
</script>
</body>
</html>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>报名审批</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
  <style>
    .header {
      background-color: #009688;
      color: #fff;
      padding: 10px;
      text-align: center;
    }

    .tab {
      margin: 10px 0;
    }

    .tab button {
      padding: 5px 10px;
      margin-right: 5px;
    }

    .tab .active {
      background-color: #009688;
      color: #fff;
    }

    .activity-list {
      margin: 10px;
    }

    .activity-item {
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 10px;
    }

    .activity-item h3 {
      margin-bottom: 5px;
    }

    .activity-item h3 span {
      float: right;
      color: #009688;
    }

    .activity-item p {
      margin: 3px 0;
    }

    .jump-btn {
      margin: 10px;
    }
  </style>
</head>

<body>
<div class="header">报名审批</div>
<div class="tab layui-btn-container">
  <button class="layui-btn active">进行中</button>
  <button class="layui-btn">已完成</button>
</div>
<div class="activity-list">
  <div class="activity-item">
    <h3>活动名称1 <span>招宣活动</span></h3>
    <p>计划开始日期：2023/03/29</p >
    <p>计划结束日期：2023/03/29</p >
    <p>活动区域：湖北省武汉市洪山区</p >
    <p>活动牵头宣传组：宣传组名称1</p >
    <p>李明于2023/03/29 更新了活动照片</p >
  </div>
  <div class="activity-item">
    <h3>武汉第一中学 <span>母校行活动</span></h3>
    <p>活动名称1活动名称1活动名称1</p >
    <p>计划开始日期：2023/03/29</p >
    <p>计划结束日期：2023/03/29</p >
    <p>行政区域地址：湖北省武汉市洪山区</p >
    <p>李明于2023/03/29 更新了活动照片</p >
  </div>
</div>
<div class="jump-btn">
  <a href=" " class="layui-btn">前往我的活动</a >
</div>
<script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js"></script>
</body>

</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>更多功能</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .function-item {
        @apply flex items-center justify-between p-4 border-b border-gray-100 bg-white hover:bg-gray-50 transition-colors;
      }
      .nav-item {
        @apply flex flex-col items-center justify-center text-gray-500 text-xs py-2;
      }
      .nav-item.active {
        @apply text-blue-600;
      }
      .update-dot {
        @apply w-2 h-2 bg-red-500 rounded-full inline-block ml-2;
      }
    }
  </style>
</head>
<body class="bg-gray-100 font-sans text-gray-800 min-h-screen">
<div class="max-w-md mx-auto bg-gray-100 min-h-screen shadow-lg">
  <!-- 头部区域 -->
  <header class="bg-blue-600 text-white p-4 relative">
    <h1 class="text-xl font-bold text-center">更多功能</h1>
    <div class="absolute right-4 top-1/2 transform -translate-y-1/2 flex items-center gap-2 bg-white/20 px-2 py-1 rounded-full">
                <span class="flex gap-1">
                    <span class="w-2 h-2 bg-white rounded-full"></span>
                    <span class="w-2 h-2 bg-white rounded-full"></span>
                    <span class="w-2 h-2 bg-white rounded-full"></span>
                </span>
      <span class="w-4 h-4 bg-white rounded-full"></span>
    </div>
  </header>

  <!-- 主内容区域 -->
  <main class="py-2">
    <!-- 功能列表 -->
    <div class="space-y-2">
      <!-- 招生能力测试 -->
      <div class="function-item" onclick="navigateTo('test')">
        <div class="flex items-center">
          <div class="w-6 h-6 border border-gray-300 mr-3 flex items-center justify-center">
            <i class="fa fa-check text-gray-400 text-xs"></i>
          </div>
          <div class="flex items-center">
            <span>招生能力测试</span>
            <span class="update-dot"></span>
            <span class="text-red-500 text-xs ml-1">有更新</span>
          </div>
        </div>
        <i class="fa fa-chevron-right text-gray-400 text-xs"></i>
      </div>

      <!-- 我的活动 -->
      <div class="function-item" onclick="navigateTo('my-activities')">
        <div class="flex items-center">
          <div class="w-6 h-6 border border-gray-300 mr-3 flex items-center justify-center">
            <i class="fa fa-check text-gray-400 text-xs"></i>
          </div>
          <div class="flex items-center">
            <span>我的活动</span>
            <span class="update-dot"></span>
            <span class="text-red-500 text-xs ml-1">有更新</span>
          </div>
        </div>
        <i class="fa fa-chevron-right text-gray-400 text-xs"></i>
      </div>

      <!-- 我的组员 -->
      <div class="function-item" onclick="navigateTo('my-team')">
        <div class="flex items-center">
          <div class="w-6 h-6 border border-gray-300 mr-3 flex items-center justify-center">
            <i class="fa fa-check text-gray-400 text-xs"></i>
          </div>
          <div class="flex items-center">
            <span>我的组员</span>
            <span class="update-dot"></span>
            <span class="text-red-500 text-xs ml-1">有更新</span>
          </div>
        </div>
        <i class="fa fa-chevron-right text-gray-400 text-xs"></i>
      </div>

      <!-- 报名审批 -->
      <div class="function-item" onclick="navigateTo('approval')">
        <div class="flex items-center">
          <div class="w-6 h-6 border border-gray-300 mr-3 flex items-center justify-center">
            <i class="fa fa-check text-gray-400 text-xs"></i>
          </div>
          <div class="flex items-center">
            <span>报名审批</span>
            <span class="update-dot"></span>
            <span class="text-red-500 text-xs ml-1">有更新</span>
          </div>
        </div>
        <i class="fa fa-chevron-right text-gray-400 text-xs"></i>
      </div>

      <!-- 招宣资料 -->
      <div class="function-item" onclick="navigateTo('materials')">
        <div class="flex items-center">
          <div class="w-6 h-6 border border-gray-300 mr-3 flex items-center justify-center">
            <i class="fa fa-check text-gray-400 text-xs"></i>
          </div>
          <div class="flex items-center">
            <span>招宣资料</span>
            <span class="update-dot"></span>
            <span class="text-red-500 text-xs ml-1">有更新</span>
          </div>
        </div>
        <i class="fa fa-chevron-right text-gray-400 text-xs"></i>
      </div>
    </div>

    <!-- 提示信息 -->
    <div class="mt-8 p-6 text-center text-gray-400 text-sm">
      <p>移动端仅显示最新动态</p>
      <p>更多内容查看PC端</p>
    </div>
  </main>

  <!-- 底部导航 -->
  <footer class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-200 flex justify-around">
    <!-- 活动广场 -->
    <div class="nav-item" onclick="navigateTo('activity-plaza')">
      <div class="w-8 h-8 border border-gray-300 mb-1 flex items-center justify-center">
        <i class="fa fa-th-large text-gray-400"></i>
      </div>
      <span>活动广场</span>
    </div>

    <!-- 招宣广场 -->
    <div class="nav-item" onclick="navigateTo('promotion-plaza')">
      <div class="w-8 h-8 border border-gray-300 mb-1 flex items-center justify-center">
        <i class="fa fa-bullhorn text-gray-400"></i>
      </div>
      <span>招宣广场</span>
    </div>

    <!-- 更多功能 (当前页) -->
    <div class="nav-item active">
      <div class="w-8 h-8 bg-blue-600 mb-1 flex items-center justify-center">
        <i class="fa fa-th text-white"></i>
      </div>
      <span>更多功能</span>
    </div>
  </footer>
</div>

<script>
  // 导航到指定页面的函数
  function navigateTo(page) {
    // 在实际应用中，这里会跳转到相应的页面
    // 这里使用控制台输出和提示信息模拟
    console.log(`导航到: ${page}`);

    // 显示提示信息
    alert(`即将跳转到: ${getPageName(page)}`);
  }

  // 获取页面名称的辅助函数
  function getPageName(page) {
    const pageNames = {
      'test': '招生能力测试',
      'my-activities': '我的活动',
      'my-team': '我的组员',
      'approval': '报名审批',
      'materials': '招宣资料',
      'activity-plaza': '活动广场',
      'promotion-plaza': '招宣广场'
    };
    return pageNames[page] || page;
  }
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>更多功能</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .function-item {
        @apply flex items-center justify-between p-4 border-b border-gray-100 bg-white hover:bg-gray-50 transition-colors;
      }
      .nav-item {
        @apply flex flex-col items-center justify-center text-gray-500 text-xs py-2;
      }
      .nav-item.active {
        @apply text-blue-600;
      }
      .update-dot {
        @apply w-2 h-2 bg-red-500 rounded-full inline-block ml-2;
      }
    }
  </style>
</head>
<body class="bg-gray-100 font-sans text-gray-800 min-h-screen">
<div class="max-w-md mx-auto bg-gray-100 min-h-screen shadow-lg">
  <!-- 头部区域 -->
  <header class="bg-blue-600 text-white p-4 relative">
    <h1 class="text-xl font-bold text-center">更多功能</h1>
    <div class="absolute right-4 top-1/2 transform -translate-y-1/2 flex items-center gap-2 bg-white/20 px-2 py-1 rounded-full">
                <span class="flex gap-1">
                    <span class="w-2 h-2 bg-white rounded-full"></span>
                    <span class="w-2 h-2 bg-white rounded-full"></span>
                    <span class="w-2 h-2 bg-white rounded-full"></span>
                </span>
      <span class="w-4 h-4 bg-white rounded-full"></span>
    </div>
  </header>

  <!-- 主内容区域 -->
  <main class="py-2">
    <!-- 功能列表 -->
    <div class="space-y-2">
      <!-- 招生能力测试 -->
      <div class="function-item" onclick="navigateTo('test')">
        <div class="flex items-center">
          <div class="w-6 h-6 border border-gray-300 mr-3 flex items-center justify-center">
            <i class="fa fa-check text-gray-400 text-xs"></i>
          </div>
          <div class="flex items-center">
            <span>招生能力测试</span>
            <span class="update-dot"></span>
            <span class="text-red-500 text-xs ml-1">有更新</span>
          </div>
        </div>
        <i class="fa fa-chevron-right text-gray-400 text-xs"></i>
      </div>

      <!-- 我的活动 -->
      <div class="function-item" onclick="navigateTo('my-activities')">
        <div class="flex items-center">
          <div class="w-6 h-6 border border-gray-300 mr-3 flex items-center justify-center">
            <i class="fa fa-check text-gray-400 text-xs"></i>
          </div>
          <div class="flex items-center">
            <span>我的活动</span>
            <span class="update-dot"></span>
            <span class="text-red-500 text-xs ml-1">有更新</span>
          </div>
        </div>
        <i class="fa fa-chevron-right text-gray-400 text-xs"></i>
      </div>

      <!-- 我的组员 -->
      <div class="function-item" onclick="navigateTo('my-team')">
        <div class="flex items-center">
          <div class="w-6 h-6 border border-gray-300 mr-3 flex items-center justify-center">
            <i class="fa fa-check text-gray-400 text-xs"></i>
          </div>
          <div class="flex items-center">
            <span>我的组员</span>
            <span class="update-dot"></span>
            <span class="text-red-500 text-xs ml-1">有更新</span>
          </div>
        </div>
        <i class="fa fa-chevron-right text-gray-400 text-xs"></i>
      </div>

      <!-- 报名审批 -->
      <div class="function-item" onclick="navigateTo('approval')">
        <div class="flex items-center">
          <div class="w-6 h-6 border border-gray-300 mr-3 flex items-center justify-center">
            <i class="fa fa-check text-gray-400 text-xs"></i>
          </div>
          <div class="flex items-center">
            <span>报名审批</span>
            <span class="update-dot"></span>
            <span class="text-red-500 text-xs ml-1">有更新</span>
          </div>
        </div>
        <i class="fa fa-chevron-right text-gray-400 text-xs"></i>
      </div>

      <!-- 招宣资料 -->
      <div class="function-item" onclick="navigateTo('materials')">
        <div class="flex items-center">
          <div class="w-6 h-6 border border-gray-300 mr-3 flex items-center justify-center">
            <i class="fa fa-check text-gray-400 text-xs"></i>
          </div>
          <div class="flex items-center">
            <span>招宣资料</span>
            <span class="update-dot"></span>
            <span class="text-red-500 text-xs ml-1">有更新</span>
          </div>
        </div>
        <i class="fa fa-chevron-right text-gray-400 text-xs"></i>
      </div>
    </div>

    <!-- 提示信息 -->
    <div class="mt-8 p-6 text-center text-gray-400 text-sm">
      <p>移动端仅显示最新动态</p>
      <p>更多内容查看PC端</p>
    </div>
  </main>

  <!-- 底部导航 -->
  <footer class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-200 flex justify-around">
    <!-- 活动广场 -->
    <div class="nav-item" onclick="navigateTo('activity-plaza')">
      <div class="w-8 h-8 border border-gray-300 mb-1 flex items-center justify-center">
        <i class="fa fa-th-large text-gray-400"></i>
      </div>
      <span>活动广场</span>
    </div>

    <!-- 招宣广场 -->
    <div class="nav-item" onclick="navigateTo('promotion-plaza')">
      <div class="w-8 h-8 border border-gray-300 mb-1 flex items-center justify-center">
        <i class="fa fa-bullhorn text-gray-400"></i>
      </div>
      <span>招宣广场</span>
    </div>

    <!-- 更多功能 (当前页) -->
    <div class="nav-item active">
      <div class="w-8 h-8 bg-blue-600 mb-1 flex items-center justify-center">
        <i class="fa fa-th text-white"></i>
      </div>
      <span>更多功能</span>
    </div>
  </footer>
</div>

<script>
  // 导航到指定页面的函数
  function navigateTo(page) {
    // 在实际应用中，这里会跳转到相应的页面
    // 这里使用控制台输出和提示信息模拟
    console.log(`导航到: ${page}`);

    // 显示提示信息
    alert(`即将跳转到: ${getPageName(page)}`);
  }

  // 获取页面名称的辅助函数
  function getPageName(page) {
    const pageNames = {
      'test': '招生能力测试',
      'my-activities': '我的活动',
      'my-team': '我的组员',
      'approval': '报名审批',
      'materials': '招宣资料',
      'activity-plaza': '活动广场',
      'promotion-plaza': '招宣广场'
    };
    return pageNames[page] || page;
  }
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>后台管理-登录</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
  <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <style>
    html, body {width: 100%;height: 100%;overflow: hidden}
    body {background: #1E9FFF;}
    body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}
    .layui-container {width: 100%;height: 100%;overflow: hidden}
    .admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:-180px;margin-top:-100px;}
    .logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}
    .logo-title h1 {color:#1E9FFF;font-size:25px;font-weight:bold;}
    .login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}
    .login-form .layui-form-item {position:relative;}
    .login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;}
    .login-form .layui-form-item input {padding-left:36px;}
    .captcha {width:60%;display:inline-block;}
    .captcha-img {display:inline-block;width:34%;float:right;}
    .captcha-img img {height:34px;border:1px solid #e6e6e6;height:36px;width:100%;}
  </style>
</head>
<body>
<div class="layui-container">
  <div class="admin-login-background">
    <div class="layui-form login-form">
      <form class="layui-form" action="">
        <div class="layui-form-item logo-title">
          <h1>H5招生宣传</h1>
          <h1>管理平台</h1>
        </div>
        <div class="layui-form-item">
          <label class="layui-icon layui-icon-username" for="username"></label>
          <input id="username" type="text" name="username" lay-verify="required|account" placeholder="用户名或者邮箱" autocomplete="off" class="layui-input" value="admin">
        </div>
        <div class="layui-form-item">
          <label class="layui-icon layui-icon-password" for="password"></label>
          <input id="password" type="password" name="password" lay-verify="required|password" placeholder="密码" autocomplete="off" class="layui-input" value="123456">
        </div>
        <div class="layui-form-item">
          <label class="layui-icon layui-icon-vercode" for="captcha"></label>
          <input id="captcha" type="text" name="captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha" value="xszg">
          <div class="captcha-img">
            <img id="captchaPic" src="images/captcha.jpg">
          </div>
        </div>
        <div class="layui-form-item">
          <input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码">
        </div>
        <div class="layui-form-item">
          <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="login">登 录</button>
        </div>
      </form>
    </div>
  </div>
</div>
<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script>
  layui.use(['form'], function () {
    var form = layui.form,
        layer = layui.layer;

    // 登录过期的时候，跳出ifram框架
    if (top.location != self.location) top.location = self.location;

    // 粒子线条背景
    $(document).ready(function(){
      $('.layui-container').particleground({
        dotColor:'#7ec7fd',
        lineColor:'#7ec7fd'
      });
    });

    // 进行登录操作
    form.on('submit(login)', function (data) {
      data = data.field;
      if (data.username == '') {
        layer.msg('用户名不能为空');
        return false;
      }
      if (data.password == '') {
        layer.msg('密码不能为空');
        return false;
      }
      if (data.captcha == '') {
        layer.msg('验证码不能为空');
        return false;
      }
      layer.msg('登录成功', function () {
        window.location = 'index.html';
      });
      return false;
    });
  });
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>我的活动</title>
  <style>
    /* 顶部导航栏样式 */
    .top-bar {
      background-color: #4285f4;
      color: white;
      padding: 15px;
      text-align: center;
    }
    .top-bar h1 {
      margin: 0;
      font-size: 20px;
    }
    /* 选项卡样式 */
    .tabs {
      display: flex;
      border-bottom: 2px solid #4285f4;
      margin: 10px;
    }
    .tab {
      padding: 10px 20px;
      cursor: pointer;
      font-size: 16px;
    }
    .tab.active {
      color: #4285f4;
    }
    /* 活动卡片样式 */
    .activity-card {
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 15px;
      margin: 10px;
    }
    .activity-card .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .activity-card .info {
      font-size: 14px;
      color: #666;
      margin-bottom: 5px;
    }
    .activity-card .update {
      font-size: 13px;
      color: #4285f4;
      cursor: pointer;
    }
    /* 按钮样式 */
    .btn {
      background-color: #4285f4;
      color: white;
      border: none;
      padding: 8px 15px;
      border-radius: 4px;
      cursor: pointer;
      margin: 10px;
    }
  </style>
</head>
<body>
<div class="top-bar">
  <h1>我的活动</h1>
</div>
<div class="tabs">
  <div class="tab active">进行中</div>
  <div class="tab">已结束</div>
</div>
<div class="activity-card">
  <div class="title">活动名称1 <span style="float: right; color: #4285f4; cursor: pointer;" onclick="location.href='activity-detail.html'">招宣活动</span></div>
  <div class="info">计划开始日期：2023/03/29</div>
  <div class="info">计划结束日期：2023/03/29</div>
  <div class="info">活动区域：湖北省武汉市洪山区</div>
  <div class="info">活动牵头宣传组：宣传组名称1</div>
  <div class="update" onclick="location.href='activity-detail.html'">李明于2023/03/29 更新了活动照片</div>
</div>
<div class="activity-card">
  <div class="title">
    <img src="school-logo.png" alt="校徽" style="width: 30px; height: 30px; margin-right: 10px;" />
    武汉第一中学 <span style="float: right; color: #4285f4; cursor: pointer;" onclick="location.href='activity-detail.html'">母校行活动</span>
  </div>
  <div class="info">活动名称1活动名称1活动名称1</div>
  <div class="info">计划开始日期：2023/03/29</div>
  <div class="info">计划结束日期：2023/03/29</div>
  <div class="info">行政区域地址：湖北省武汉市洪山区</div>
  <div class="update" onclick="location.href='activity-detaill.html'">李明于2023/03/29 更新了活动照片</div>
</div>
<button class="btn" onclick="location.href='add-middle-school.html'">添加中学</button>
<button class="btn" onclick="location.href='add-video.html'">添加视频</button>
<button class="btn" onclick="location.href='add-photo.html'">添加照片</button>
</body>
</html>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>我的活动</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
  <style>
    .header {
      background-color: #009688;
      color: #fff;
      padding: 10px;
      text-align: center;
    }

    .activity-info {
      margin: 10px;
    }

    .activity-info h3 {
      margin-bottom: 10px;
    }

    .activity-info h3 .share {
      float: right;
      color: #009688;
      cursor: pointer;
    }

    .activity-info p {
      margin: 5px 0;
    }

    .application-info p {
      margin: 3px 0;
    }

    .approval-process p {
      margin: 5px 0;
    }

    .process-item {
      margin: 3px 0;
    }

    .cancel-application {
      background-color: #ff5722;
      color: #fff;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }

    .jump-btn {
      margin: 10px;
    }
  </style>
</head>

<body>
<div class="header">我的活动</div>
<div class="activity-info">
  <h3>活动名称1 <span class="share">分享活动</span></h3>
  <p>审批状态：申请中；等待意见</p>
  <p>活动来源：派发</p>
  <p>活动时间：计划开始日期：2023/03/29，计划结束日期：2023/03/29，合计时长：1天</p>
  <p>活动区域：湖北省/武汉市/洪山区</p>
  <p>活动牵头宣传组：宣传组名称1</p>
  <div class="application-info">
    <p>报名申请</p>
    <p>姓名：姓名1</p>
    <p>学号/工号：10001</p>
    <p>学院：A学院</p>
    <p>QQ：10000</p>
    <p>微信：10000</p>
    <p>请选择意向前往中学（高中）：湖北一中、湖北二中</p>
    <p>是否愿意担任团队负责人：愿意</p>
    <p>大学以来担任学生干部经历：团委书记</p>
  </div>
  <div class="approval-process">
    <p>审批流程</p>
    <div class="process-item">
      <span>发起人(招宣成员/全体教职工)：LIHUANYU</span>
    </div>
    <div class="process-item">
      <span>审批人(活动组长)：LIHUANYU</span>
    </div>
  </div>
  <button class="cancel-application layui-btn">撤销申请</button>
</div>
<div class="jump-btn">
  <a href="recruitment-materials.html" class="layui-btn">前往招宣资料</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js"></script>
</body>

</html>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>我的活动</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
  <style>
    .header {
      background-color: #009688;
      color: #fff;
      padding: 10px;
      text-align: center;
    }

    .activity-info {
      margin: 10px;
    }

    .activity-info h3 {
      margin-bottom: 10px;
    }

    .activity-info h3 .share {
      float: right;
      color: #009688;
      cursor: pointer;
    }

    .activity-info p {
      margin: 5px 0;
    }

    .approval-process p {
      margin: 5px 0;
    }

    .process-item {
      margin: 3px 0;
    }

    .cancel-application {
      background-color: #ff5722;
      color: #fff;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }

    .jump-btn {
      margin: 10px;
    }
  </style>
</head>

<body>
<div class="header">我的活动</div>
<div class="activity-info">
  <h3>活动名称1 <span class="share">分享活动</span></h3>
  <p>审批状态：申请中；等待意见</p>
  <p>活动来源：派发</p>
  <p>活动时间：计划开始日期：2023/03/29，计划结束日期：2023/03/29，合计时长：1天</p>
  <p>活动区域：湖北省/武汉市/洪山区</p>
  <p>活动牵头宣传组：宣传组名称1</p>
  <div class="approval-process">
    <p>审批流程</p>
    <div class="process-item">
      <span>发起人(招宣成员/全体教职工)：LIHUANYU</span>
    </div>
    <div class="process-item">
      <span>审批人(活动组长)：LIHUANYU</span>
    </div>
  </div>
  <button class="cancel-application layui-btn">撤销申请</button>
</div>
<div class="jump-btn">
  <a href="my-activity-detail.html" class="layui-btn">前往我的活动详情</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js"></script>
</body>

</html>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>招宣资料</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
  <style>
    .header {
      background-color: #009688;
      color: #fff;
      padding: 10px;
      text-align: center;
    }

    .search-input {
      margin: 10px;
      padding: 5px;
      width: 200px;
    }

    .file-list {
      margin: 10px;
    }

    .file-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
    }

    .file-item .update-time {
      margin-right: 10px;
    }

    .jump-btn {
      margin: 10px;
    }
  </style>
</head>

<body>
<div class="header">招宣资料</div>
<input type="text" placeholder="请输入文件名称模糊查询" class="search-input layui-input">
<div class="file-list">
  <div class="file-item">
    <span>全员共享文件夹</span>
    <span class="update-time">2024/4/23 10:11更新</span>
    <button class="layui-btn">下载</button>
  </div>
  <div class="file-item">
    <span>公文文件.docx</span>
    <span class="update-time">2024/4/23 10:11更新</span>
    <button class="layui-btn">下载</button>
  </div>
  <div class="file-item">
    <span>公文文件.PPT</span>
    <span class="update-time">2024/4/23 10:11更新</span>
    <button class="layui-btn">下载</button>
  </div>
  <div class="file-item">
    <span>公文文件.excel</span>
    <span class="update-time">2024/4/23 10:11更新</span>
    <button class="layui-btn">下载</button>
  </div>
  <!DOCTYPE html>
  <html>

  <head>
    <meta charset="utf-8">
    <title>招生能力测试</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <style>
      .header {
        background-color: #009688;
        color: #fff;
        padding: 10px;
        text-align: center;
      }

      .tab {
        margin: 10px 0;
      }

      .tab button {
        padding: 5px 10px;
        margin-right: 5px;
      }

      .tab .active {
        background-color: #009688;
        color: #fff;
      }

      .activity-info {
        margin: 10px;
      }

      .activity-info h3 {
        margin-bottom: 10px;
      }

      .activity-info h3 .share {
        float: right;
        color: #009688;
        cursor: pointer;
      }

      .member p {
        margin: 5px 0;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      table,
      th,
      td {
        border: 1px solid #ccc;
      }

      th,
      td {
        padding: 5px;
        text-align: left;
      }

      .activity-summary p {
        margin: 5px 0;
      }

      .exit-group {
        background-color: #ff5722;
        color: #fff;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
      }

      .jump-btn {
        margin: 10px;
      }
    </style>
  </head>

  <body>
  <div class="header">招生能力测试</div>
  <div class="tab layui-btn-container">
    <button class="layui-btn active">招宣组1</button>
    <button class="layui-btn">招宣组2</button>
  </div>
  <div class="activity-info">
    <h3>活动名称1 <span class="share">分享</span></h3>
    <div class="member">
      <p>组长：李明</p>
      <p>副组长：李明</p>
      <p>联络员：李明</p>
    </div>
    <div class="activity-members">
      <table>
        <thead>
        <tr>
          <th>姓名</th>
          <th>所在校单位</th>
          <th>职务</th>
          <th>联系电话</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>李明</td>
          <td>A单位</td>
          <td>教师</td>
          <td>15888888888</td>
        </tr>
        <tr>
          <td>王海</td>
          <td>A单位</td>
          <td>教师</td>
          <td>15888888888</td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="activity-summary">
      <p>最近的一条活动总结</p>
      <p>#10001关联活动标题</p>
      <p>"活动总结活动总结活动总结活动总结活动总结活动总结活动总结活动总结活动总结活动总结活动总结活动总结活动总结活动总结活动总结活动总结活动总结活动总结活动总结活动总结"</p>
      <p>记录于2023/03/21 00:00:00</p>
      <p>记录人：周彬</p>
    </div>
    <button class="exit-group layui-btn">退出本组</button>
  </div>
  <div class="jump-btn">
    <a href="application-approval.html" class="layui-btn">前往报名审批</a>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js"></script>
  </body>

  </html>
  <!DOCTYPE html>
  <html lang="zh-CN">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>考试结果</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Microsoft Yahei", sans-serif;
      }

      body {
        background-color: #f7f9fa;
      }

      .header {
        background-color: #4080ff;
        color: #fff;
        width: 100%;
        padding: 15px 20px;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        position: relative;
      }

      .header .right {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .header .dot,
      .header .circle {
        width: 30px;
        height: 30px;
        background-color: #fff;
        border-radius: 5px;
      }

      .header .dot {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .header .dot::before {
        content: "···";
        font-size: 18px;
      }

      .header .circle {
        border-radius: 50%;
      }

      .content {
        padding: 20px;
      }

      .paper-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
      }

      .info-item {
        font-size: 14px;
        margin-bottom: 8px;
      }

      .score {
        color: #f5222d;
      }

      .guide {
        background-color: #fffbe6;
        border: 1px solid #ffe58f;
        border-radius: 5px;
        padding: 15px;
        margin: 20px 0;
      }

      .guide-title {
        font-weight: 600;
        margin-bottom: 8px;
      }

      .guide-desc {
        font-size: 14px;
        color: #666;
      }

      .question-type {
        color: #4080ff;
        font-weight: 600;
        margin: 15px 0 10px;
      }

      .question {
        font-size: 14px;
        margin-bottom: 10px;
      }

      .answer-area {
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 10px;
        margin-bottom: 15px;
        background-color: #fff;
      }

      .answer-area::placeholder {
        color: #999;
      }

      .option {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
      }

      .option input {
        margin-right: 8px;
      }
    </style>
  </head>

  <body>
  <div class="header">
    更多功能
    <div class="right">
      <div class="dot"></div>
      <div class="circle"></div>
    </div>
  </div>
  <div class="content">
    <div class="paper-title">学情（“三考三促”）线上考试试卷</div>
    <div class="info-item">考生：WANGDAQIANG（10001）</div>
    <div class="info-item">考试年度：2022年</div>
    <div class="info-item">评卷人：QIANJIAXIN（10000）</div>
    <div class="info-item">开始日期：2023/03/29</div>
    <div class="info-item">结束日期：2023/03/29</div>
    <div class="info-item">得分：<span class="score">51分</span></div>

    <div class="guide">
      <div class="guide-title">导语</div>
      <div class="guide-desc">
        对招宣知识的掌握程度以及理解分析信息和解决问题的能力，可以更好地武装头脑，指导实践推动工作。
      </div>
    </div>

    <div class="question-type">1、单选题</div>
    <div class="question">①标题标题标题标题标题标题</div>
    <div class="answer-area" placeholder="请选择答案"></div>
    <div class="question-type">得分：<span class="score">1分</span></div>

    <div class="question-type">2、多选题</div>
    <div class="question">①标题标题标题标题标题标题</div>
    <div class="option">
      <input type="checkbox" checked />
      <span>答案1</span>
    </div>
    <div class="option">
      <input type="checkbox" />
      <span>答案2</span>
    </div>
    <div class="option">
      <input type="checkbox" />
      <span>答案3</span>
    </div>
    <div class="question-type">得分：<span class="score">1分</span></div>
  </div>
  </body>

  </html>

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提交成功</title>
    <!-- 引入Layui CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
    <style>
      body {
        background-color: #f5f7fa;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        margin: 0;
      }
      .success-container {
        max-width: 400px;
        width: 90%;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        overflow: hidden;
        text-align: center;
        padding: 30px 20px;
      }
      .layui-card-header {
        background-color: #1E9FFF;
        color: #fff;
        padding: 15px 20px;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: -30px -20px 30px;
      }
      .success-icon {
        width: 100px;
        height: 100px;
        background-color: #5FB878;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 20px;
      }
      .success-icon i {
        color: #fff;
        font-size: 50px;
      }
      .success-title {
        font-size: 24px;
        color: #333;
        margin-bottom: 15px;
        font-weight: bold;
      }
      .success-message {
        color: #666;
        line-height: 1.8;
        margin-bottom: 30px;
        padding: 0 10px;
      }
      .back-btn {
        background-color: #1E9FFF;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.2s;
        width: 100%;
        height: 45px;
        line-height: 45px;
      }
      .back-btn:hover {
        background-color: #0090FF;
      }
    </style>
  </head>
  <body>
  <div class="success-container">
    <div class="layui-card-header">
      <span>招宣详情</span>
      <div>
        <button class="layui-btn layui-btn-primary layui-btn-sm" style="margin-right: 5px;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </button>
        <button class="layui-btn layui-btn-primary layui-btn-sm">
          <i class="layui-icon layui-icon-refresh"></i>
        </button>
      </div>
    </div>

    <div class="success-icon">
      <i class="layui-icon layui-icon-ok"></i>
    </div>

    <h2 class="success-title">提交成功</h2>

    <p class="success-message">
      请耐心等待审核，<br>
      或在"我的活动"中查看
    </p >

    <button class="back-btn" onclick="window.location.href='activity-detail.html'">
      返回
    </button>
  </div>

  <!-- 引入Layui JS -->
  <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
  <script>
    layui.use(['layer'], function() {
      var layer = layui.layer;

      // 页面加载完成后显示成功提示
      layer.msg('提交成功，等待审核', {
        icon: 1,
        time: 2000
      });
    });
  </script>
  </body>
  </html>


  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提交成功</title>
    <!-- 引入Layui CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
    <style>
      body {
        background-color: #f5f7fa;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        margin: 0;
      }
      .success-container {
        max-width: 400px;
        width: 90%;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        overflow: hidden;
        text-align: center;
        padding: 30px 20px;
      }
      .layui-card-header {
        background-color: #1E9FFF;
        color: #fff;
        padding: 15px 20px;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: -30px -20px 30px;
      }
      .success-icon {
        width: 80px;
        height: 80px;
        background-color: #5FB878;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 20px;
      }
      .success-icon i {
        color: #fff;
        font-size: 40px;
      }
      .success-title {
        font-size: 22px;
        color: #333;
        margin-bottom: 15px;
      }
      .success-message {
        color: #666;
        line-height: 1.6;
        margin-bottom: 30px;
      }
      .back-btn {
        background-color: #1E9FFF;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.2s;
      }
      .back-btn:hover {
        background-color: #0090FF;
      }
    </style>
  </head>
  <body>
  <div class="success-container">
    <div class="layui-card-header">
      <span>招宣详情</span>
      <div>
        <button class="layui-btn layui-btn-primary layui-btn-sm" style="margin-right: 5px;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </button>
        <button class="layui-btn layui-btn-primary layui-btn-sm">
          <i class="layui-icon layui-icon-refresh"></i>
        </button>
      </div>
    </div>

    <div class="success-icon">
      <i class="layui-icon layui-icon-ok"></i>
    </div>

    <h2 class="success-title">提交成功</h2>

    <p class="success-message">
      请耐心等待审核，<br>
      或在"我的活动"中查看
    </p >

    <button class="back-btn" onclick="window.location.href='activity-form.html'">
      返回
    </button>
  </div>

  <!-- 引入Layui JS -->
  <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
  <script>
    layui.use(['layer'], function() {
      var layer = layui.layer;

      // 页面加载完成后显示成功提示
      layer.msg('提交成功，等待审核', {
        icon: 1,
        time: 2000
      });
    });
  </script>
  </body>
  </html>

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>春季招生能力测试</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .nav-item {
          @apply flex flex-col items-center justify-center py-2;
        }
        .nav-item.active {
          @apply text-blue-600;
        }
      }
    </style>
  </head>
  <body class="bg-gray-100 font-sans text-gray-800 min-h-screen">
  <div class="max-w-md mx-auto bg-gray-100 min-h-screen shadow-lg">
    <!-- 头部区域 -->
    <header class="bg-blue-600 text-white p-4 relative">
      <h1 class="text-xl font-bold text-center">更多功能</h1>
      <div class="absolute right-4 top-1/2 transform -translate-y-1/2 flex items-center gap-2 bg-white/20 px-2 py-1 rounded-full">
                <span class="flex gap-1">
                    <span class="w-2 h-2 bg-white rounded-full"></span>
                    <span class="w-2 h-2 bg-white rounded-full"></span>
                    <span class="w-2 h-2 bg-white rounded-full"></span>
                </span>
        <span class="w-4 h-4 bg-white rounded-full"></span>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="py-6 px-4">
      <h2 class="text-xl font-bold text-center mb-6">春季招生能力测试</h2>

      <div class="bg-gray-200 p-6 mb-6 rounded-md">
        <p class="text-gray-700 mb-4">尊敬的各位招宣人员：</p >
        <p class="text-gray-700 mb-4">本次考试共28题，请您于4月X号18:00-20:00</p >
        <p class="text-gray-700 mb-4">完成测试。请务必在规定的时间内完成，一旦</p >
        <p class="text-gray-700 mb-4">超时分数记为0。若已知晓上述内容，请开始</p >
        <p class="text-gray-700">测试。</p >
      </div>

      <div class="flex items-center mb-8">
        <input type="checkbox" id="agreement" class="w-4 h-4 text-blue-600" checked>
        <label for="agreement" class="ml-2 text-gray-700">我已知晓上述内容</label>
      </div>

      <button id="start-test" class="w-full bg-blue-600 text-white py-3 rounded-md font-medium hover:bg-blue-700 transition-colors" onclick="window.location.href='test-questions.html'">
        开始测试
      </button>
    </main>
    <br>
    <br>
    <br>
    <br>
    <!-- 底部导航 -->
    <footer class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-200 flex justify-around">
      <!-- 活动广场 -->
      <div class="nav-item" onclick="window.location.href='activity-plaza.html'">
        <div class="w-8 h-8 border border-gray-300 mb-1 flex items-center justify-center">
          <i class="fa fa-th-large text-gray-400"></i>
        </div>
        <span class="text-xs text-gray-500">活动广场</span>
      </div>

      <!-- 招宣广场 -->
      <div class="nav-item" onclick="window.location.href='promotion-plaza.html'">
        <div class="w-8 h-8 border border-gray-300 mb-1 flex items-center justify-center">
          <i class="fa fa-bullhorn text-gray-400"></i>
        </div>
        <span class="text-xs text-gray-500">招宣广场</span>
      </div>

      <!-- 更多功能 -->
      <div class="nav-item active">
        <div class="w-8 h-8 bg-blue-600 mb-1 flex items-center justify-center">
          <i class="fa fa-th text-white"></i>
        </div>
        <span class="text-xs text-blue-600">更多功能</span>
      </div>
    </footer>
  </div>

  <script>
    // 复选框状态变化时启用/禁用开始测试按钮
    document.getElementById('agreement').addEventListener('change', function() {
      const startBtn = document.getElementById('start-test');
      startBtn.disabled = !this.checked;
      if (this.checked) {
        startBtn.classList.remove('opacity-50', 'cursor-not-allowed');
        startBtn.classList.add('hover:bg-blue-700');
      } else {
        startBtn.classList.add('opacity-50', 'cursor-not-allowed');
        startBtn.classList.remove('hover:bg-blue-700');
      }
    });
  </script>
  </body>
  </html>

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>招生能力测试</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .tab-active {
          @apply text-blue-600 border-b-2 border-blue-600;
        }
        .test-item {
          @apply bg-white rounded-md border border-gray-200 overflow-hidden shadow-sm hover:shadow-md transition-shadow;
        }
      }
    </style>
  </head>
  <body class="bg-gray-100 font-sans text-gray-800 min-h-screen">
  <div class="max-w-md mx-auto bg-gray-100 min-h-screen shadow-lg">
    <!-- 头部区域 -->
    <header class="bg-blue-600 text-white p-4 relative">
      <h1 class="text-xl font-bold text-center">招生能力测试</h1>
      <div class="absolute right-4 top-1/2 transform -translate-y-1/2 flex items-center gap-2 bg-white/20 px-2 py-1 rounded-full">
                <span class="flex gap-1">
                    <span class="w-2 h-2 bg-white rounded-full"></span>
                    <span class="w-2 h-2 bg-white rounded-full"></span>
                    <span class="w-2 h-2 bg-white rounded-full"></span>
                </span>
        <span class="w-4 h-4 bg-white rounded-full"></span>
      </div>
    </header>

    <!-- 标签页导航 -->
    <div class="flex border-b bg-white">
      <button id="tab-active" class="flex-1 py-3 text-center font-medium tab-active">
        进行中
      </button>
      <button id="tab-completed" class="flex-1 py-3 text-center font-medium text-gray-500">
        已完成
      </button>
    </div>

    <!-- 主内容区域 -->
    <main class="py-4 px-3">
      <!-- 测试列表 -->
      <div class="space-y-4">
        <!-- 测试题1 -->
        <div class="test-item" onclick="window.location.href='test-info.html'">
          <div class="p-4">
            <h2 class="font-bold text-lg mb-3">招生能力测试题1</h2>
            <div class="space-y-1 text-sm text-gray-600 mb-4">
              <p>开始日期：2023/03/29</p >
              <p>结束日期：2023/03/29</p >
              <p>剩余提交时间：3天4时5分</p >
            </div>
            <div class="flex items-center">
              <div class="border border-gray-300 flex mr-3">
                <div class="w-6 h-6 border-r border-gray-300 flex items-center justify-center text-xs">名</div>
                <div class="w-6 h-6 border-r border-gray-300 flex items-center justify-center text-xs">额</div>
                <div class="w-6 h-6 border-r border-gray-300 flex items-center justify-center text-xs">剩</div>
                <div class="w-6 h-6 flex items-center justify-center text-xs">余</div>
              </div>
              <p class="text-sm">28人已经完成，赶紧测试吧！</p >
            </div>
          </div>
        </div>

        <!-- 更多测试可以在这里添加 -->
      </div>
    </main>

    <!-- 底部导航 -->
    <footer class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-200 flex justify-around">
      <!-- 活动广场 -->
      <div class="nav-item" onclick="window.location.href='activity-plaza.html'">
        <div class="w-8 h-8 border border-gray-300 mb-1 flex items-center justify-center">
          <i class="fa fa-th-large text-gray-400"></i>
        </div>
        <span class="text-xs text-gray-500">活动广场</span>
      </div>

      <!-- 招宣广场 -->
      <div class="nav-item" onclick="window.location.href='promotion-plaza.html'">
        <div class="w-8 h-8 border border-gray-300 mb-1 flex items-center justify-center">
          <i class="fa fa-bullhorn text-gray-400"></i>
        </div>
        <span class="text-xs text-gray-500">招宣广场</span>
      </div>

      <!-- 更多功能 -->
      <div class="nav-item active">
        <div class="w-8 h-8 bg-blue-600 mb-1 flex items-center justify-center">
          <i class="fa fa-th text-white"></i>
        </div>
        <span class="text-xs text-blue-600">更多功能</span>
      </div>
    </footer>
  </div>

  <script>
    // 切换标签页
    document.getElementById('tab-active').addEventListener('click', function() {
      this.classList.add('tab-active');
      this.classList.remove('text-gray-500');
      document.getElementById('tab-completed').classList.remove('tab-active');
      document.getElementById('tab-completed').classList.add('text-gray-500');
      // 这里可以添加切换内容的逻辑
    });

    document.getElementById('tab-completed').addEventListener('click', function() {
      this.classList.add('tab-active');
      this.classList.remove('text-gray-500');
      document.getElementById('tab-active').classList.remove('tab-active');
      document.getElementById('tab-active').classList.add('text-gray-500');
      // 这里可以添加切换内容的逻辑
    });
  </script>
  </body>
  </html>

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>招生能力测试 - 答题</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .question-item {
          @apply mb-6 pb-6 border-b border-gray-100;
        }
        .option-item {
          @apply flex items-center mb-2 p-2 border border-gray-200 rounded-md hover:bg-gray-50 cursor-pointer;
        }
        .option-item.selected {
          @apply bg-blue-50 border-blue-200;
        }
        .nav-item {
          @apply flex flex-col items-center justify-center py-2;
        }
        .nav-item.active {
          @apply text-blue-600;
        }
      }
    </style>
  </head>
  <body class="bg-gray-100 font-sans text-gray-800 min-h-screen">
  <div class="max-w-md mx-auto bg-gray-100 min-h-screen shadow-lg">
    <!-- 头部区域 -->
    <header class="bg-blue-600 text-white p-4 relative">
      <h1 class="text-xl font-bold text-center">更多功能</h1>
      <div class="absolute right-4 top-1/2 transform -translate-y-1/2 flex items-center gap-2 bg-white/20 px-2 py-1 rounded-full">
                <span class="flex gap-1">
                    <span class="w-2 h-2 bg-white rounded-full"></span>
                    <span class="w-2 h-2 bg-white rounded-full"></span>
                    <span class="w-2 h-2 bg-white rounded-full"></span>
                </span>
        <span class="w-4 h-4 bg-white rounded-full"></span>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="py-4 px-4">
      <!-- 导语 -->
      <div class="bg-yellow-50 p-4 rounded-md mb-6 border border-yellow-100">
        <div class="flex items-start">
          <i class="fa fa-lightbulb-o text-yellow-500 mt-0.5 mr-2"></i>
          <div>
            <h3 class="font-medium text-yellow-800 mb-1">导语</h3>
            <p class="text-sm text-yellow-700">
              对招宣知识的掌握程度以及理解分析信息和解决问题的能力，可以更好地武装头脑，指导实践推动工作。
            </p >
          </div>
        </div>
      </div>

      <!-- 题目区域 -->
      <div class="space-y-6">
        <!-- 单选题 -->
        <div class="question-item">
          <h3 class="text-blue-600 font-medium mb-3">1、单选题</h3>
          <p class="mb-4">①标题标题标题标题标题标题</p >

          <div class="space-y-2">
            <div class="option-item" onclick="selectOption(this)">
              <input type="radio" name="q1" class="mr-2" value="A">
              <span>选项A：这是第一个选项的内容描述</span>
            </div>
            <div class="option-item" onclick="selectOption(this)">
              <input type="radio" name="q1" class="mr-2" value="B">
              <span>选项B：这是第二个选项的内容描述</span>
            </div>
            <div class="option-item" onclick="selectOption(this)">
              <input type="radio" name="q1" class="mr-2" value="C">
              <span>选项C：这是第三个选项的内容描述</span>
            </div>
            <div class="option-item" onclick="selectOption(this)">
              <input type="radio" name="q1" class="mr-2" value="D">
              <span>选项D：这是第四个选项的内容描述</span>
            </div>
          </div>
        </div>

        <!-- 多选题 -->
        <div class="question-item">
          <h3 class="text-blue-600 font-medium mb-3">2、多选题</h3>
          <p class="mb-4">①标题标题标题标题标题标题</p >

          <div class="space-y-2">
            <div class="option-item" onclick="toggleCheckbox(this)">
              <input type="checkbox" class="mr-2" checked>
              <span>答案1：这是第一个选项的内容描述</span>
            </div>
            <div class="option-item" onclick="toggleCheckbox(this)">
              <input type="checkbox" class="mr-2">
              <span>答案2：这是第二个选项的内容描述</span>
            </div>
            <div class="option-item" onclick="toggleCheckbox(this)">
              <input type="checkbox" class="mr-2">
              <span>答案3：这是第三个选项的内容描述</span>
            </div>
            <div class="option-item" onclick="toggleCheckbox(this)">
              <input type="checkbox" class="mr-2">
              <span>答案4：这是第四个选项的内容描述</span>
            </div>
          </div>
        </div>

        <!-- 填空题 -->
        <div class="question-item">
          <h3 class="text-blue-600 font-medium mb-3">3、填空题</h3>
          <p class="mb-4">①标题标题标题标题标题标题</p >
          <input type="text" placeholder="请输入答案" class="w-full p-3 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500">
          <br />
        </div>

        <!-- 可以继续添加更多题目 -->
      </div>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <!-- 提交按钮 -->
      <div class="fixed bottom-16 left-0 right-0 max-w-md mx-auto px-4">
        <button class="w-full bg-blue-600 text-white py-3 rounded-md font-medium hover:bg-blue-700 transition-colors" onclick="window.location.href='tjcg.html'">
          立即提交
        </button>
      </div>
    </main>

    <!-- 底部导航 -->
    <footer class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-200 flex justify-around">
      <!-- 活动广场 -->
      <div class="nav-item" onclick="window.location.href='activity-plaza.html'">
        <div class="w-8 h-8 border border-gray-300 mb-1 flex items-center justify-center">
          <i class="fa fa-th-large text-gray-400"></i>
        </div>
        <span class="text-xs text-gray-500">活动广场</span>
      </div>

      <!-- 招宣广场 -->
      <div class="nav-item" onclick="window.location.href='promotion-plaza.html'">
        <div class="w-8 h-8 border border-gray-300 mb-1 flex items-center justify-center">
          <i class="fa fa-bullhorn text-gray-400"></i>
        </div>
        <span class="text-xs text-gray-500">招宣广场</span>
      </div>

      <!-- 更多功能 -->
      <div class="nav-item active">
        <div class="w-8 h-8 bg-blue-600 mb-1 flex items-center justify-center">
          <i class="fa fa-th text-white"></i>
        </div>
        <span class="text-xs text-blue-600">更多功能</span>
      </div>
    </footer>
  </div>

  <script>
    // 单选题选择

    <!DOCTYPE html>
    <html lang="zh-CN">

        <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>提交成功</title>
    <style>
      * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Microsoft Yahei", sans-serif;
    }

      body {
        background-color: #f7f9fa;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

      .header {
        background-color: #4080ff;
      color: #fff;
      width: 100%;
      padding: 15px 20px;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      position: relative;
    }

      .header .right {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      gap: 10px;
    }

      .header .dot,
      .header .circle {
      width: 30px;
      height: 30px;
      background-color: #fff;
      border-radius: 5px;
    }

      .header .dot {
      display: flex;
      justify-content: center;
      align-items: center;
    }

      .header .dot::before {
      content: "···";
      font-size: 18px;
    }

      .header .circle {
        border-radius: 50%;
    }

      .content {
      padding: 40px 20px;
      text-align: center;
    }

      .check-circle {
      width: 80px;
      height: 80px;
      background-color: #52c41a;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto 20px;
    }

      .check-circle i {
      color: #fff;
      font-size: 40px;
    }

      .title {
        font-size: 24px;
      font-weight: 600;
      margin-bottom: 10px;
    }

      .desc {
        font-size: 14px;
      color: #999;
      margin-bottom: 30px;
    }

      .back-btn {
        background-color: #4080ff;
      color: #fff;
      border: none;
      padding: 10px 40px;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
    }
    </style>
    <!-- 引入 Font Awesome 图标库 -->
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    />
    </head>

    <body>
    <div class="header">
      更多功能
      <div class="right">
        <div class="dot"></div>
        <div class="circle"></div>
      </div>
    </div>
    <div class="content">
      <div class="check-circle">
        <i class="fas fa-check"></i>
      </div>
      <div class="title">提交成功</div>
      <div class="desc">感谢您对本次工作参与</div>
      <button class="back-btn" id="backBtn">返回列表</button>
    </div>

    <script>
      // 为“返回列表”按钮添加点击事件，点击跳转到考试结果页面
      document.getElementById("backBtn").addEventListener("click", function () {
      window.location.href = "result.html";
    });
  </script><!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>招生宣传</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .tab-active {
          @apply text-blue-600 border-b-2 border-blue-600;
        }
        .page-transition {
          transition: all 0.3s ease;
        }
      }
    </style>

    <style>
      /* 页面切换动画 */
      .page {
        display: none;
      }

      .page.active {
        display: block;
        animation: fadeIn 0.3s ease forwards;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* 活动卡片悬停效果 */
      .activity-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }

      .activity-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
    </style>
  </head>
  <body class="bg-gray-100 font-sans text-gray-800 min-h-screen">
  <div class="max-w-md mx-auto bg-white min-h-screen shadow-lg">
    <!-- 头部区域 -->
    <header class="bg-blue-600 text-white p-4 relative">
      <h1 class="text-xl font-bold text-center">招生宣传</h1>
      <div class="absolute right-4 top-1/2 transform -translate-y-1/2 flex items-center gap-2 bg-white/20 px-2 py-1 rounded-full">
                <span class="flex gap-1">
                    <span class="w-2 h-2 bg-white rounded-full"></span>
                    <span class="w-2 h-2 bg-white rounded-full"></span>
                    <span class="w-2 h-2 bg-white rounded-full"></span>
                </span>
        <span class="w-4 h-4 bg-white rounded-full"></span>
      </div>
    </header>

    <!-- 活动状态提示 -->
    <div class="bg-yellow-100 text-orange-500 p-2 text-center text-sm">
      3个活动正在进行中
    </div>

    <!-- 主内容区域 -->
    <main>
      <!-- 标签页导航 -->
      <div class="flex border-b">
        <button id="tab-activity" class="flex-1 py-3 text-center font-medium tab-active" onclick="switchTab('activity')">
          招宣活动
        </button>
        <button id="tab-school" class="flex-1 py-3 text-center font-medium text-gray-500" onclick="switchTab('school')">
          母校行
        </button>
      </div>

      <!-- 招宣活动页面 -->
      <div id="page-activity" class="page active p-4">
        <!-- 搜索框 -->
        <div class="relative mb-4">
          <input type="text" placeholder="请输入活动名称模糊查询"
                 class="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500">
          <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>

        <!-- 活动列表 -->
        <div class="space-y-4">
          <!-- 活动1 -->
          <div class="activity-card bg-white border border-gray-200 rounded-md p-4" onclick="goToDetail('活动名称1')">
            <div class="flex justify-between items-start mb-3">
              <h2 class="font-bold text-lg">活动名称1</h2>
              <span class="text-blue-600 text-sm cursor-pointer">开放报名中</span>
            </div>
            <div class="space-y-1 text-sm text-gray-600 mb-4">
              <p>计划开始日期：2023/03/29</p >
              <p>计划结束日期：2023/03/29</p >
              <p>活动区域：湖北省武汉市洪山区</p >
              <p>活动牵头宣传组：宣传组名称1</p >
            </div>
            <div class="flex items-center">
              <div class="border border-gray-300 flex mr-3">
                <div class="w-6 h-6 border-r border-gray-300 flex items-center justify-center text-xs">名</div>
                <div class="w-6 h-6 border-r border-gray-300 flex items-center justify-center text-xs">额</div>
                <div class="w-6 h-6 border-r border-gray-300 flex items-center justify-center text-xs">剩</div>
                <div class="w-6 h-6 flex items-center justify-center text-xs">余</div>
              </div>
              <p class="text-sm">28人已经参与活动，赶紧报名吧！</p >
            </div>
          </div>

          <!-- 活动2 -->
          <div class="activity-card bg-white border border-gray-200 rounded-md p-4" onclick="goToDetail('活动名称2')">
            <div class="flex justify-between items-start mb-3">
              <h2 class="font-bold text-lg">活动名称2</h2>
              <span class="text-blue-600 text-sm cursor-pointer">开放报名中</span>
            </div>
            <div class="space-y-1 text-sm text-gray-600 mb-4">
              <p>计划开始日期：2023/04/15</p >
              <p>计划结束日期：2023/04/16</p >
              <p>活动区域：湖北省武汉市武昌区</p >
              <p>活动牵头宣传组：宣传组名称2</p >
            </div>
            <div class="flex items-center">
              <div class="border border-gray-300 flex mr-3">
                <div class="w-6 h-6 border-r border-gray-300 flex items-center justify-center text-xs">名</div>
                <div class="w-6 h-6 border-r border-gray-300 flex items-center justify-center text-xs">额</div>
                <div class="w-6 h-6 border-r border-gray-300 flex items-center justify-center text-xs">剩</div>
                <div class="w-6 h-6 flex items-center justify-center text-xs">余</div>
              </div>
              <p class="text-sm">15人已经参与活动，赶紧报名吧！</p >
            </div>
          </div>
  </body>

  </html>

  <!-- 活动3 -->
  <div class="activity-card bg-white border border-gray-200 rounded-md p-4" onclick="goToDetail('活动名称3')">
    <div class="flex justify-between items-start mb-3">
      <h2 class="font-bold text-lg">活动名称3</h2>
      <span class="text-orange-500 text-sm cursor-pointer">即将截止</span>
    </div>
    <div class="space-y-1 text-sm text-gray-600 mb-4">
      <p>计划开始日期：2023/03/20</p >
      <p>计划结束日期：2023/03/30</p >
      <p>活动区域：湖北省武汉市东湖新技术开发区</p >
      <p>活动牵头宣传组：宣传组名称3</p >
    </div>
    <div class="flex items-center">
      <div class="border border-gray-300 flex mr-3">
        <div class="w-6 h-6 border-r border-gray-300 flex items-center justify-center text-xs">名</div>
        <div class="w-6 h-6 border-r border-gray-300 flex items-center justify-center text-xs">额</div>
        <div class="w-6 h-6 border-r border-gray-300 flex items-center justify-center text-xs">剩</div>
        <div class="w-6 h-6 flex items-center justify-center text-xs">余</div>
      </div>
      <p class="text-sm">42人已经参与活动，赶紧报名吧！</p >
    </div>
  </div>
</div>
</div>

<!-- 母校行页面 -->
<div id="page-school" class="page p-4">
  <!-- 搜索框 -->
  <div class="relative mb-4">
    <input type="text" placeholder="请输入活动名称模糊查询"
           class="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500">
    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
  </div>

  <!-- 母校行活动列表 -->
  <div class="space-y-4">
    <!-- 母校行活动1 -->
    <div class="activity-card bg-white border border-gray-200 rounded-md p-4" onclick="goToDetail('武汉一中母校行')">
      <div class="flex justify-between items-start mb-3">
        <h2 class="font-bold text-lg">武汉一中母校行</h2>
        <span class="text-blue-600 text-sm cursor-pointer">开放报名中</span>
      </div>
      <div class="space-y-1 text-sm text-gray-600 mb-4">
        <p>计划开始日期：2023/04/05</p >
        <p>计划结束日期：2023/04/05</p >
        <p>活动区域：湖北省武汉市江汉区</p >
        <p>活动牵头宣传组：母校行一组</p >
      </div>
      <div class="flex items-center">
        <div class="border border-gray-300 flex mr-3">
          <div class="w-6 h-6 border-r border-gray-300 flex items-center justify-center text-xs">名</div>
          <div class="w-6 h-6 border-r border-gray-300 flex items-center justify-center text-xs">额</div>
          <div class="w-6 h-6 border-r border-gray-300 flex items-center justify-center text-xs">剩</div>
          <div class="w-6 h-6 flex items-center justify-center text-xs">余</div>
        </div>
        <p class="text-sm">12人已经参与活动，赶紧报名吧！</p >
      </div>
    </div>

    <!-- 母校行活动2 -->
    <div class="activity-card bg-white border border-gray-200 rounded-md p-4" onclick="goToDetail('黄冈中学母校行')">
      <div class="flex justify-between items-start mb-3">
        <h2 class="font-bold text-lg">黄冈中学母校行</h2>
        <span class="text-blue-600 text-sm cursor-pointer">开放报名中</span>
      </div>
      <div class="space-y-1 text-sm text-gray-600 mb-4">
        <p>计划开始日期：2023/04/10</p >
        <p>计划结束日期：2023/04/10</p >
        <p>活动区域：湖北省黄冈市黄州区</p >
        <p>活动牵头宣传组：母校行二组</p >
      </div>
      <div class="flex items-center">
        <div class="border border-gray-300 flex mr-3">
          <div class="w-6 h-6 border-r border-gray-300 flex items-center justify-center text-xs">名</div>
          <div class="w-6 h-6 border-r border-gray-300 flex items-center justify-center text-xs">额</div>
          <div class="w-6 h-6 border-r border-gray-300 flex items-center justify-center text-xs">剩</div>
          <div class="w-6 h-6 flex items-center justify-center text-xs">余</div>
        </div>
        <p class="text-sm">8人已经参与活动，赶紧报名吧！</p >
      </div>
    </div>
  </div>
</div>

<!-- 活动详情页 -->
<div id="page-detail" class="page p-4">
  <div class="flex items-center mb-4">
    <button onclick="goBack()" class="text-gray-500 mr-2">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h2 class="text-lg font-bold" id="detail-title">活动详情</h2>
  </div>

  <div class="bg-white border border-gray-200 rounded-md p-4 mb-4">
    <div class="text-right mb-4">
      <span id="detail-status" class="inline-block bg-blue-100 text-blue-600 px-2 py-1 rounded text-sm">开放报名中</span>
    </div>

    <div class="space-y-3 text-gray-700">
      <p><span class="font-medium">活动时间：</span><span id="detail-time">2023/03/29</span></p >
      <p><span class="font-medium">活动区域：</span><span id="detail-area">湖北省武汉市洪山区</span></p >
      <p><span class="font-medium">牵头宣传组：</span><span id="detail-group">宣传组名称1</span></p >
      <p><span class="font-medium">参与人数：</span><span id="detail-participants">28人</span></p >
      <p><span class="font-medium">活动简介：</span></p >
      <p id="detail-description" class="text-sm bg-gray-50 p-3 rounded">
        本次招生宣传活动旨在向当地学生和家长介绍学校的办学特色、专业设置、招生政策等信息，帮助考生更好地了解我校，为报考做准备。活动将包括校园介绍、专业咨询、优秀学子分享等环节。
      </p >
    </div>
  </div>

  <button  class="btn"  onclick="location.href='activity-form.html'">我要报名</button>
</div>
</main>
</div>

<script>
  // 当前激活的标签页
  let currentTab = 'activity';
  // 记录上一页，用于返回功能
  let previousPage = 'activity';

  // 切换标签页
  function switchTab(tabName) {
    if (tabName === currentTab) return;

    // 更新标签样式
    document.getElementById(`tab-${currentTab}`).classList.remove('tab-active');
    document.getElementById(`tab-${currentTab}`).classList.add('text-gray-500');
    document.getElementById(`tab-${tabName}`).classList.add('tab-active');
    document.getElementById(`tab-${tabName}`).classList.remove('text-gray-500');

    // 隐藏当前页面，显示新页面
    document.getElementById(`page-${currentTab}`).classList.remove('active');
    document.getElementById(`page-${tabName}`).classList.add('active');

    currentTab = tabName;
  }

  // 跳转到活动详情页
  function goToDetail(activityName) {
    // 保存当前页面，用于返回
    previousPage = currentTab;

    // 更新详情页内容
    document.getElementById('detail-title').textContent = activityName;

    // 根据不同活动设置不同详情
    if (activityName === '活动名称1') {
      document.getElementById('detail-status').textContent = '开放报名中';
      document.getElementById('detail-status').className = 'inline-block bg-blue-100 text-blue-600 px-2 py-1 rounded text-sm';
      document.getElementById('detail-time').textContent = '2023/03/29';
      document.getElementById('detail-area').textContent = '湖北省武汉市洪山区';
      document.getElementById('detail-group').textContent = '宣传组名称1';
      document.getElementById('detail-participants').textContent = '28人';
    } else if (activityName === '活动名称2') {
      document.getElementById('detail-status').textContent = '开放报名中';
      document.getElementById('detail-status').className = 'inline-block bg-blue-100 text-blue-600 px-2 py-1 rounded text-sm';
      document.getElementById('detail-time').textContent = '2023/04/15 - 2023/04/16';
      document.getElementById('detail-area').textContent = '湖北省武汉市武昌区';
      document.getElementById('detail-group').textContent = '宣传组名称2';
      document.getElementById('detail-participants').textContent = '15人';
    } else if (activityName === '活动名称3') {
      document.getElementById('detail-status').textContent = '即将截止';
      document.getElementById('detail-status').className = 'inline-block bg-orange-100 text-orange-600 px-2 py-1 rounded text-sm';
      document.getElementById('detail-time').textContent = '2023/03/20 - 2023/03/30';
      document.getElementById('detail-area').textContent = '湖北省武汉市东湖新技术开发区';
      document.getElementById('detail-group').textContent = '宣传组名称3';
      document.getElementById('detail-participants').textContent = '42人';
    } else if (activityName === '武汉一中母校行') {
      document.getElementById('detail-status').textContent = '开放报名中';
      document.getElementById('detail-status').className = 'inline-block bg-blue-100 text-blue-600 px-2 py-1 rounded text-sm';
      document.getElementById('detail-time').textContent = '2023/04/05';
      document.getElementById('detail-area').textContent = '湖北省武汉市江汉区';
      document.getElementById('detail-group').textContent = '母校行一组';
      document.getElementById('detail-participants').textContent = '12人';
      document.getElementById('detail-description').textContent = '回到武汉一中，向学弟学妹们分享大学生活，介绍我校的优势专业和招生政策，鼓励优秀学子报考我校。';
    } else if (activityName === '黄冈中学母校行') {
      document.getElementById('detail-status').textContent = '开放报名中';
      document.getElementById('detail-status').className = 'inline-block bg-blue-100 text-blue-600 px-2 py-1 rounded text-sm';
      document.getElementById('detail-time').textContent = '2023/04/10';
      document.getElementById('detail-area').textContent = '湖北省黄冈市黄州区';
      document.getElementById('detail-group').textContent = '母校行二组';
      document.getElementById('detail-participants').textContent = '8人';
      document.getElementById('detail-description').textContent = '在黄冈中学开展招生宣传活动，通过讲座、咨询等形式，让学生和家长全面了解我校的教育理念和培养模式。';
    }

    // 显示详情页，隐藏当前页面
    document.getElementById(`page-${currentTab}`).classList.remove('active');
    document.getElementById('page-detail').classList.add('active');
  }

  // 返回上一页
  function goBack() {
    document.getElementById('page-detail').classList.remove('active');
    document.getElementById(`page-${previousPage}`).classList.add('active');
  }
</script>
</body>
</html>

